import React from 'react'
import style from './style'
import cx from 'classnames'

export default 
class extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      value: props.value
    }
  }

  static defaultProps = {
    value: 0,
    step: .1,
    max: 10,
    min: 0
  }

  handleChange(e) {
    this.setState({ value: e.target.value })
    this.props.onChange(e.target.value)
  }

  render() {
    const { value, onChange, className, ...others } = this.props
    return (
      <div className={cx({
        [style.root]: true,
        [className]: className
      })}>
        <input  
          defaultValue={value}
          {...others}
          onChange={::this.handleChange}
          type="range"
        />
        <div className={style.bar}>
          <div 
            className={style.leftBar}
            style={{
              flexGrow: `${this.state.value/this.props.max}`
            }}
          />
          <div 
            style={{
              flexGrow: `${1-this.state.value/this.props.max}`
            }}
            className={style.rightBar}
          />
        </div>
        <div 
          style={{
            left: `${this.state.value* 10}%`,
            marginLeft: `${-4-this.state.value }px`
          }}
          className={style.tip}>{ this.state.value || 0 }</div>
      </div>
    )
  }
}
